<template>
  <div class='box'>
    <p>健康报告</p>
    <CommonTable style="height: 500px;" :tableData="tableData" :tableHeader="tableHeader" :isOperate="isOperate" :total="total"
      :operateWidth="operateWidth" @sizeChange="sizeChange" @currentChange="currentChange">
      <template #empower="scope">
        <p v-if="scope.row.isAuth">是</p>
        <p v-else>否</p>
      </template>
      <template #reportType="scope">
        <p v-if="scope.row.type ==1">手工</p>
        <p v-else>福娃AI</p>
      </template>
      <template #action="scope">
          <el-button
            v-if="scope.row.isAuth"
            size="small"
            type="success"
            text
            @click="check(scope.row)">
            查看报告
          </el-button>
          <el-button
          v-else
            size="small"
            type="success"
            text
            @click="nocheck()"
            >
            查看报告
          </el-button>
          <el-button
            size="small"
            type="success"
            text
            @click="referTo(scope?.row?.id)">
            请求授权查阅
          </el-button>
        </template>
    </CommonTable>
    <reportDetail
      ref="addOrUpdateRef"
      :dialogDatas="dialogDatas"
    />
  </div>
</template>
 
<script setup lang='ts'>
defineOptions({ name: 'healthReportIndex' });//健康报告
import CommonTable from "@/components/Table/src/CommonTable.vue";
import reportDetail from "@/views/APMReport/components/add-or-update/index.vue";
import { userReportListRequest,userApplyRequest } from "@/api/user/reportList/index";
import { ref, reactive } from "vue";
const props = defineProps({
  userId:{
    type:[String,Number],
    default:()=>[]
  }
})
// 查看报告相关
const addOrUpdateRef = ref();
let dialogDatas = reactive({});
const onAddOrUpdate = (data?: Recordable) => {
  addOrUpdateRef.value.init(data);
};
// 表格所需的数据
let tableData = ref([]);
//表头数据
const tableHeader = reactive([
  // {
  //   prop: "isReview", //prop
  //   label: "状态", //label
  //   slot: "isReview", //插槽根据需求显示
  //   width: "130px", //宽度
  //   align: "left", // 对齐方式
  //   fixed: 'left'//固定左侧或右侧？left/right
  // },
  {
    prop: "reportTime",
    label: "报告时间",
    align: "center",
    minWidth: '80' 
  },
  {
    prop: "isAuth",
    slot:'empower',
    label: "是否授权查阅",
    align: "center",
    minWidth: '120' 
  },
  {
    prop: "type",
    slot:'reportType',
    label: "报告类型",
    align: "center",
    minWidth: '80' 
  },
  {
    prop: "endAuthTime",
    label: "授权截止时间",
    align: "center",
    minWidth: '120' 
  },
  // {
  //   prop: "manualTime",
  //   label: "解读时间",
  //   align: "center",
  // },
  {
    label: "操作",
    slot: "action",
    fixed: "right",
    width: "240px",
    align: "center"
  }
]);

const operateWidth = ref(160); // 操作列宽度
const isOperate = ref(true); // 操作列是否显示
const total = ref(0); // 总条数
// 查看报告
const check = (val:any) =>{
  dialogDatas = {
    title: '查看',
    type: 'check',
    datas: val
  };
  onAddOrUpdate(dialogDatas);
}
const nocheck = () =>{
  ElMessage.error('无权限查看')
}

// 请求授权查阅
const referTo = (rowDataId: any) => {
  ElMessageBox.confirm('请求授权查阅，是否请求', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning'
  })
    .then(async () => {
      const data: any = await userApplyRequest({id:rowDataId});
      if (data.code === 2000) {
        ElMessage.success('请求成功')
        getuserReportList()
      } else {
        ElMessage.error(data?.message)
        return
      }
    })
};
// 获取列表
const showTable = ref(true)
let pageParams =reactive({
  pageSize: 10,
  pageNum: 1,
  userId: props.userId
})
const getuserReportList = async () => {
  showTable.value = false;
  tableData.value = [];
  const res: any = await userReportListRequest(pageParams);
  if (res.code === 2000) {
    tableData.value = res.data.list
    total.value = res.data.total
    showTable.value = true
  } else {
    ElMessage.error(res.data.message)
    return
  }
};
// 分页改变事件
const sizeChange = (val: any) => {
  // debugger
  pageParams.pageSize = val;
  getuserReportList()
};
// 当前页改变事件
const currentChange = (val: any) => {
  // debugger
  pageParams.pageNum = val;
  getuserReportList()
};

getuserReportList()
</script>
<style lang="scss" scoped>
.box {}
</style>